import PropTypes from "prop-types";
import React, { memo, useState } from "react";
import SectionTabsWrapper from "./style";
import classNames from "classnames";
import ScrollView from "@/base-ui/scroll-view";

const SectionTabs = memo((props) => {
  const { addressData=[],tabClick } = props;

  // 定义一个初始化索引
  const [currentIndex, setcurrentIndex] = useState(0);

  // 定义点击切换active
  function getActive(index,item) {
    setcurrentIndex(index);
    // 将获取到的index和name传送回到父组件
    tabClick(index,item)
  }
  return (
    <SectionTabsWrapper>
      <ScrollView>
        {addressData.map((item, index) => {
          return (
            <li
              key={index}
              className={classNames("additem", {
                active: currentIndex === index,
              })}
              onClick={(e) => getActive(index,item)}
            >
              {item}
            </li>
          );
        })}
      </ScrollView>
    </SectionTabsWrapper>
  );
});

SectionTabs.propTypes = {
  addressData: PropTypes.array,
  tabClick: PropTypes.func,
};

export default SectionTabs;
